<template>
  <view class="login-container">
    <!-- 顶部标题 -->
    <view class="header">
      <image class="logo" src="/static/logo.png" mode="aspectFit"/>
      <view class="title-box">
        <text class="title">欢迎登录</text>
        <text class="subtitle">若未注册，将自动注册新账号</text>
      </view>
    </view>
    
    <!-- 登录表单 -->
    <view class="login-form">
      <!-- 手机号输入 -->
      <view class="input-group">
        <text class="label">手机号码</text>
        <view class="input-box">
          <text class="prefix">+86</text>
          <input 
            type="number" 
            v-model="phone"
            maxlength="11"
            placeholder="请输入手机号码"
            @input="validatePhone"
          />
        </view>
      </view>
      
      <!-- 验证码输入 -->
      <view class="input-group">
        <text class="label">验证码</text>
        <view class="input-box code">
          <input 
            type="number" 
            v-model="code"
            maxlength="6"
            placeholder="请输入验证码"
          />
          <view 
            class="code-btn-wrapper"
            @click="sendCode"
          >
            <view 
              class="code-btn" 
              :class="{ disabled: !canSendCode || counting, counting }"
            >
              <view class="btn-content">
                <text>{{ counting ? '' : '获取验证码' }}</text>
                <text v-if="counting" class="countdown">
                  <text class="num">{{ countdown }}</text>
                  <text class="unit">s</text>
                </text>
              </view>
              <view class="btn-bg"></view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 登录按钮 -->
    <button 
      class="login-btn" 
      :disabled="!canLogin"
      :class="{ active: canLogin }"
      @tap="handleLogin"
    >
      <text>登录</text>
    </button>
    
    <!-- 用户协议 -->
    <view class="agreement">
      <checkbox 
        :checked="agreed" 
        @tap="agreed = !agreed"
        color="#ff5062"
      />
      <text class="agreement-text">
        登录即代表同意
        <text class="link" @tap="showAgreement('userAgreement')">《用户协议》</text>
        和
        <text class="link" @tap="showAgreement('privacy')">《隐私政策》</text>
      </text>
    </view>
    
    <!-- 协议弹出层 -->
    <u-popup
      :show="showPopup"
      @close="closePopup"
      mode="bottom"
      :round="16"
      :closeable="true"
      :safeAreaInsetBottom="true"
    >
      <view class="agreement-popup">
        <view class="popup-header">
          <text class="title">{{ popupTitle }}</text>
        </view>
        <scroll-view 
          scroll-y 
          class="popup-content"
          :style="{ height: '60vh' }"
        >
          <rich-text :nodes="currentContent"></rich-text>
        </scroll-view>
      </view>
    </u-popup>
  </view>
</template>

<script setup>
import { ref, computed, onUnmounted } from 'vue'
import { UserUtils } from '../../utils/userUtils'

const phone = ref('')
const code = ref('')
const agreed = ref(false)
const counting = ref(false)
const countdown = ref(60)

// 弹出层控制
const showPopup = ref(false)
const popupTitle = ref('')
const currentContent = ref('')

// 协议内容
const agreements = {
  userAgreement: `
    <div style="padding: 30rpx;">
      <h3>用户协议</h3>
      <p>欢迎使用我们的服务！</p>
      <p>1. 服务说明</p>
      <p>本协议是您与平台之间关于使用平台服务所订立的协议。</p>
      <p>2. 账号注册</p>
      <p>您承诺提供真实、准确、完整的注册信息。</p>
      <p>3. 用户义务</p>
      <p>您应当遵守中华人民共和国相关法律法规。</p>
      <p>4. 隐私保护</p>
      <p>我们重视您的个人信息保护。</p>
      <p>5. 其他条款</p>
      <p>平台保留随时修改本协议的权利。</p>
    </div>
  `,
  privacy: `
    <div style="padding: 30rpx;">
      <h3>隐私政策</h3>
      <p>我们非常重视您的隐私保护。</p>
      <p>1. 信息收集</p>
      <p>我们收集的信息包括但不限于：手机号码等。</p>
      <p>2. 信息使用</p>
      <p>我们承诺合理使用您的个人信息。</p>
      <p>3. 信息保护</p>
      <p>我们采取严格的数据安全措施。</p>
      <p>4. 信息共享</p>
      <p>未经您同意，我们不会向第三方分享您的信息。</p>
      <p>5. 您的权利</p>
      <p>您有权查询、更正或删除您的个人信息。</p>
    </div>
  `
}

// 发送验证码
const sendCode = () => {
  // 按钮禁用提示
  if (!canSendCode.value) {
    uni.showToast({title: '请输入正确的手机号码', icon: 'none'})
    return
  }
  // 如果按钮正在倒计时，直接返回
  if (counting.value) return
  // 开始倒计时
  counting.value = true
  countdown.value = 60
  // 模拟发送验证码
  uni.showToast({title: '验证码已发送', icon: 'none'})
  // 创建定时器
  const timer = setInterval(() => {
    if (countdown.value <= 1) {
      // 倒计时结束
      clearInterval(timer)
      counting.value = false
      countdown.value = 60
    } 
	else {countdown.value--}
  }, 1000)
  // 组件卸载时清除定时器
  onUnmounted(() => {if (timer) clearInterval(timer)})
}

// 处理登录
const handleLogin = () => {
  if (!canLogin.value) return
  UserUtils.login({phone: phone.value, code: code.value})
}

// 显示协议内容
const showAgreement = (type) => {
  popupTitle.value = type === 'userAgreement' ? '用户协议' : '隐私政策'
  currentContent.value = agreements[type]
  showPopup.value = true
}

// 关闭弹出层
const closePopup = () => {
  showPopup.value = false
}

// 验证手机号格式
const validatePhone = () => {
  if (phone.value.length > 11) {
    phone.value = phone.value.slice(0, 11)
  }
}

// 是否可以发送验证码
const canSendCode = computed(() => {
  return /^1[3-9]\d{9}$/.test(phone.value)
})

// 是否可以登录
const canLogin = computed(() => {
  return canSendCode.value && code.value.length === 6 && agreed.value
})
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 90vh;
  padding: 60rpx 40rpx;
  background: linear-gradient(to bottom, #fff, #f8f8f8);
  
  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 100rpx;
    
    .logo {
      width: 180rpx;
      height: 180rpx;
      margin-bottom: 40rpx;
      border-radius: 30rpx;
      box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.08);
      transition: transform 0.3s ease;
      
      &:active {
        transform: scale(0.95);
      }
    }
    
    .title-box {
      text-align: center;
      
      .title {
        font-size: 44rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 20rpx;
        display: block;
        letter-spacing: 2rpx;
        background: linear-gradient(135deg, #333, #666);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      
      .subtitle {
        font-size: 26rpx;
        color: #999;
        letter-spacing: 1rpx;
      }
    }
  }
  
  .login-form {
    .input-group {
      margin-bottom: 50rpx;
      
      .label {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 24rpx;
        display: block;
        font-weight: 500;
        padding-left: 10rpx;
      }
      
      .input-box {
        display: flex;
        align-items: center;
        height: 100rpx;
        background: #f8f8f8;
        border-radius: 20rpx;
        padding: 0 30rpx;
        transition: all 0.3s ease;
        border: 2rpx solid #c4c4c4;
    
        
        &:focus-within {
          background: #fff;
          border-color: rgba(255, 80, 98, 0.3);
          box-shadow: 0 4rpx 16rpx rgba(255, 80, 98, 0.1);
          transform: translateY(-2rpx);
        }
        
        .prefix {
          font-size: 28rpx;
          color: #666;
          margin-right: 24rpx;
          padding-right: 24rpx;
          border-right: 2rpx solid #eee;
          font-weight: 500;
        }
        
        input {
          flex: 1;
          height: 100%;
          font-size: 32rpx;
          color: #333;
          letter-spacing: 1rpx;
          
          &::placeholder {
            color: #bbb;
            font-size: 28rpx;
            letter-spacing: normal;
          }
        }
        
        &.code {
          position: relative;
          padding-right: 6rpx;
          
          input {
            letter-spacing: 2rpx;
            font-weight: 500;
            padding-right: 220rpx;
          }
          
          .code-btn-wrapper {
            position: absolute;
            right: 6rpx;
            top: 50%;
            transform: translateY(-50%);
            height: 80rpx;
            min-width: 200rpx;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          
          .code-btn {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28rpx;
            font-weight: 500;
            color: #333;
            border-radius: 12rpx;
            overflow: hidden;
            transition: all 0.3s ease;
            position: relative;
            
            .btn-content {
              position: relative;
              z-index: 1;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            
            .countdown {
              display: flex;
              align-items: center;
              
              .num {
                font-size: 32rpx;
                font-weight: 600;
                color: #ff5062;
                min-width: 40rpx;
                text-align: center;
              }
              
              .unit {
                font-size: 24rpx;
                color: #999;
                margin-left: 4rpx;
              }
            }
            
            .btn-bg {
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              opacity: 0.1;
              transition: opacity 0.3s;
            }
            
            &.counting {
              pointer-events: none;
              
              .btn-bg {
                opacity: 0;
                background: #f5f5f5;
              }
            }
            
            &.disabled {
              color: #999;
              pointer-events: none;
              
              .btn-bg {
                opacity: 0;
                background: #f5f5f5;
              }
            }
            
            &:not(.disabled):not(.counting) {
              color: #ff5062;
              cursor: pointer;
              
              &:active {
                transform: scale(0.95);
                
                .btn-bg {
                  opacity: 0.2;
                }
              }
            }
          }
        }
      }
    }
  }
  
  .login-btn {
    width: 100%;
    height: 90rpx;
    background: #f5f5f5;
    border-radius: 45rpx;
    font-size: 32rpx;
    color: #999;
    font-weight: 500;
    margin: 80rpx 0;
    transition: all 0.3s ease;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2rpx solid #c4c4c4;
    
    &.active {
      background: linear-gradient(135deg, #ff6b81, #ff4757);
      color: #fff;
      box-shadow: 0 8rpx 24rpx rgba(255, 80, 98, 0.3);
      
      &:active {
        transform: scale(0.98);
        opacity: 0.9;
        box-shadow: 0 4rpx 12rpx rgba(255, 80, 98, 0.2);
      }
    }
  }
  
  .agreement {
    display: flex;
    align-items: center;
    justify-content: center;
    
    .agreement-text {
      font-size: 24rpx;
      color: #999;
      margin-left: 12rpx;
      
      .link {
        color: #ff5062;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          left: 0;
          right: 0;
          bottom: -2rpx;
          height: 1rpx;
          background: #ff5062;
          opacity: 0.5;
        }
      }
    }
  }
}

.agreement-popup {
  .popup-header {
    padding: 30rpx;
    text-align: center;
    border-bottom: 2rpx solid #eee;
    
    .title {
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
    }
  }
  
  .popup-content {
    padding: 0 30rpx;
    
    :deep(h3) {
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
      margin: 30rpx 0;
    }
    
    :deep(p) {
      font-size: 28rpx;
      color: #666;
      line-height: 1.6;
      margin: 20rpx 0;
    }
  }
}

.link {
  color: #ff5062;
  position: relative;
  
  &::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2rpx;
    height: 1rpx;
    background: #ff5062;
    opacity: 0.5;
  }
  
  &:active {
    opacity: 0.7;
  }
}
</style> 